<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>触摸事件对象touchEvent</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div></div>
  <script>
    // 触摸事件对象
    // 1. 获取元素
    // 2. 手指触摸DOM元素事件
    var div = document.querySelector('div')
    div.addEventListener('touchstart', function (e) {
      // console.log(e);
      // touches 正在触摸屏幕的所有手指的列表
      // targetTouches 正在触摸当前DOM元素的手指列表
      // 如果侦听的是一个DOM元素，他们两个是一样的
      // changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无
      // 因为我们一般都是触摸元素 所以最经常使用的是 targetTouches
      console.log(e.targetTouches[0])
      // targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等

    })
    // 3. 手指在DOM元素身上移动事件
    div.addEventListener('touchmove', function () {

    })
    // 4. 手指离开DOM元素事件
    div.addEventListener('touchend', function (e) {
      // console.log(e);
      // 当我们手指离开屏幕的时候，就没有了 touches 和 targetTouches 列表
      // 但是会有 changedTouches

    })
  </script>
</body>
</html>